<template>
	<view class="container">
		<view class="nav_bar" :style="computedStyle">
			<view class="name">质量安全服务平台</view>
		</view>
		<img class="bg_img" src="https://jsgl.zfcxjw.cq.gov.cn:28082/prod-api/profile/upload/2025/06/17/index-bg_20250617105453A970.jpg" alt="">

		<view class="content">
			<!-- 项目和人员信息 -->
			<swiper class="swiper" :indicator-dots="userInfo.role == '普通人员'? false : true" indicator-color="#E2E2E2" indicator-active-color="#9AC1FF">
				<swiper-item v-if="userInfo.role !== '普通人员'">
					<view class="projectInfo">
						<view class="projectInfo_head"> 
							<view class="projectInfo_head_left">
								项目信息
							</view>
							<view class="projectInfo_head_right" @click="switchProject">
								<image src="https://jsgl.zfcxjw.cq.gov.cn:28082/prod-api/profile/upload/2025/06/21/switch-icon_20250621081316A260.png"></image>
								<text>切换项目</text>
							</view>
						</view>
						<view class="projectInfo_content">
							<view class="projectInfo_content_item">
								<view class="projectInfo_content_item_left">项目名称</view>
								<view class="projectInfo_content_item_right">{{ projectInfo.name || '--'}}</view>
							</view>
							<view class="projectInfo_content_item">
								<view class="projectInfo_content_item_left">项目编码</view>
								<view class="projectInfo_content_item_right">{{ projectInfo.code || '--' }}</view>
							</view>
							<view class="projectInfo_content_item">
								<view class="projectInfo_content_item_left">项目地址</view>
								<view class="projectInfo_content_item_right">{{ projectInfo.address || '--'}}</view>
							</view>
							<view class="projectInfo_content_item">
								<view class="projectInfo_content_item_left">项目状态</view>
								<u-tag :text="dictLabel(project_status, projectInfo.status)" plain plainFill size="mini" :bgColor="statuscy(projectInfo.status).backgroundColor" :color="statuscy(projectInfo.status).color" :borderColor="statuscy(projectInfo.status).borderColor"></u-tag>
							</view>
							<view class="btn">
								<u-button type="warning" shape="circle" @click="handleCheck(1)">考勤打卡</u-button>
								<u-button type="primary" shape="circle" @click="handleCheck(8)">考勤记录</u-button>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="userInfo">
						<view class="userInfo_head"> 
							<view class="userInfo_head_left">
								<u-avatar size="60" :src="userInfo.avatar || ''"></u-avatar>
							</view>
							<view class="userInfo_head_right">
								<view class="userInfo_head_right_name">
									<text>{{ userInfo.name }}</text>
									<u-icon :name="userInfo.sex == 0 ? 'man' : 'woman'" :color="userInfo.sex == 0 ? '#1269FF' : '#FF6A6A'" size="22" ></u-icon>
									<!-- <u-icon name="woman" color="#FF6A6A" size="22" v-if="userInfo.sex == 1"></u-icon> -->
								</view>
								<view class="userInfo_head_right_role">
									<u-tag :text="userInfo.role" plain plainFill size="mini" v-if="userInfo.role"></u-tag>
									<text v-else>--</text>
								</view>
								<view class="userInfo_head_right_phone">手机号 {{ userInfo.phonenumber || '--'}}</view>
							</view>
						</view>
						<view class="userInfo_content">
							<view class="userInfo_content_item">
								<view class="userInfo_content_item_left">
									<image src="https://jsgl.zfcxjw.cq.gov.cn:28082/prod-api/profile/upload/2025/06/21/idCard-icon_20250621081422A261.png"></image>
								</view>
								<view class="userInfo_content_item_right" v-if="userInfo.idCard">
									{{ showIdCard(userInfo.idCard) || '--'}}
								</view>
							</view>
							<template v-if="userInfo.role == '管理人员'">
								<view class="userInfo_content_item">
									<view class="userInfo_content_item_left">
										<image src="https://jsgl.zfcxjw.cq.gov.cn:28082/prod-api/profile/upload/2025/06/21/unit-icon_20250621081800A262.png"></image>
									</view>
									<view class="userInfo_content_item_right">
										{{ userInfo.enterprise || '--'}}
									</view>
								</view>
								<view class="userInfo_content_item">
									<view class="userInfo_content_item_left">
										<image src="https://jsgl.zfcxjw.cq.gov.cn:28082/prod-api/profile/upload/2025/06/21/post-icon_20250621081842A263.png"></image>
									</view>
									<view class="userInfo_content_item_right">
										{{ userInfo.postName || '--'}}
									</view>
								</view>
							</template>
							<template v-else>
								<view class="userInfo_content_item">
									<view class="userInfo_content_item_left">
										<image src="https://jsgl.zfcxjw.cq.gov.cn:28082/prod-api/profile/upload/2025/06/21/age-icon_20250621081915A264.png"></image>
									</view>
									<view class="userInfo_content_item_right">
										35岁
									</view>
								</view>
								<view class="userInfo_content_item">
									<view class="userInfo_content_item_left">
										<image src="https://jsgl.zfcxjw.cq.gov.cn:28082/prod-api/profile/upload/2025/06/21/marker-icon_20250621081941A265.png"></image>
									</view>
									<view class="userInfo_content_item_right">
										重庆市沙坪坝区小龙坎石小路70号
									</view>
								</view>
							</template>
						</view>
					</view>
				</swiper-item>
			</swiper>
			
			<!-- 项目管理 -->
			<view class="manage" v-if="userInfo.role == '管理人员'">
				<view class="manage_head">
						项目管理
				</view>
				<view class="manage_content">
					<view class="manage_content_item" v-for="item in mgtData" :key="item.id" @click="handleLink(item)">
						<view class="manage_content_item_icon">
							<image :src="item.icon"></image>
						</view>
						<text>{{ item.name }}</text>
					</view>
				</view>
			</view>

			<!-- 办事指南 -->
			<view class="guide">
				<view class="guide_head">
					<view class="guide_head_left">
						办事指南
					</view>
					<view class="guide_head_right" @click="handleMore">
						<text>更多</text>
						<u-icon name="arrow-right-double" color="#1684FC" ></u-icon>
					</view>
				</view>
				<view class="guide_content">
					<view class="guide_content_item" v-for="item in guideList" :key="item.piId" @click="handleDetail(item)">
						<view class="guide_content_item_left">
							<view class="guide_content_item_left_title">
								{{ item.piTitle }}
							</view>
							<view class="guide_content_item_left_time">
								{{ item.publishDate }}
							</view>
						</view>
						<view class="guide_content_item_right">
							<u-image src="https://jsgl.zfcxjw.cq.gov.cn:28082/prod-api/profile/upload/2025/06/17/bszn-bg_20250617105611A983.png" radius="10" width="200rpx" height="160rpx" mode="aspectFill"></u-image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { onShow, onLoad, onPageScroll, onPullDownRefresh } from "@dcloudio/uni-app";
import { sex, project_status, dictLabel } from "@/utils/common.js"
import { showIdCard } from '@/utils/index.js'
import { getUserInfo } from '@/utils/permission.js'

import { getGuide } from '@/api/qss/index.js'

/* 初始化 */
const projectInfo = ref({}) // 项目信息
const userInfo = ref({}) // 用户信息
function init(){
    if(uni.getStorageSync('activeProject')){
        projectInfo.value = uni.getStorageSync('activeProject')
		console.log(projectInfo.value,'activeProject')
    }else{}

	if(uni.getStorageSync('userInfo')){
		userInfo.value = uni.getStorageSync('userInfo')
		console.log(userInfo.value,'userInfo')
	}else{
	}
}

/* 办事指南 */
const guideList = ref([])
function getGuideList(){
	getGuide({
		pageNum: 1,
		pageSize: 5,
		piType:1,
		status:0
	}).then(res=>{
		guideList.value = res.rows
	})
}

/* 切换项目 */
function switchProject(){
	uni.navigateTo({
		url: '/pagesC/project/index'
	})
}

/* 更多 */
function handleMore(){
	uni.navigateTo({
		url: '/pagesC/guide/index'
	})
}

/* 详情 */
function handleDetail(item){
	uni.navigateTo({
		url: '/pagesC/guide/detail?id=' + item.piId
	})
}

function handleLink(item){
	if([2,4,7].includes(item.id)){
		handleCheck(item.id)
	}else if([5,8].includes(item.id)){
		uni.navigateTo({
			url: item.path+(item.id==8?'?pid='+projectInfo.value.id:item.id==5?'?name='+projectInfo.value.name:'')
		})
	}else{
		uni.navigateTo({
			url: item.path
		})
	}
}

/* 项目信息 */
const mgtData = ref([
	{ id: 1, name: '参建单位', icon:'https://jsgl.zfcxjw.cq.gov.cn:28082/prod-api/profile/upload/2025/06/21/home-icon1_20250621082044A266.png', path: '/pagesC/project/enterprise'},
	{ id: 2, name: '花名册', icon:'https://jsgl.zfcxjw.cq.gov.cn:28082/prod-api/profile/upload/2025/06/21/home-icon2_20250621082051A267.png', path: '/pagesA/pages/roster/roster'},
	{ id: 3, name: '人员认证', icon:'https://jsgl.zfcxjw.cq.gov.cn:28082/prod-api/profile/upload/2025/06/21/home-icon3_20250621082100A268.png', path: '/pagesC/certification/realName/index?type=2'},
	{ id: 4, name: '考勤统计', icon:'https://jsgl.zfcxjw.cq.gov.cn:28082/prod-api/profile/upload/2025/06/21/home-icon4_20250621082103A269.png', path:'/pagesA/pages/attendanceFlow/attendanceFlow'},
	{ id: 5, name: '混凝土', icon:'https://jsgl.zfcxjw.cq.gov.cn:28082/prod-api/profile/upload/2025/06/21/home-icon5_20250621082106A270.png', path: '/pagesC/project/concrete' },
	{ id: 6, name: '视频监控', icon:'https://jsgl.zfcxjw.cq.gov.cn:28082/prod-api/profile/upload/2025/06/21/home-icon6_20250621082343A271.png', path: '/pagesC/project/video'},
	{ id: 7, name: '考勤范围', icon:'https://jsgl.zfcxjw.cq.gov.cn:28082/prod-api/profile/upload/2025/06/21/home-icon7_20250621082346A272.png', path: '/pagesA/pages/attendance/areaList/editAreaConfig/editAreaConfig'},
	{ id: 8, name: '整改回复', icon:'https://jsgl.zfcxjw.cq.gov.cn:28082/prod-api/profile/upload/2025/06/21/home-icon8_20250621082349A273.png', path: '/pagesC/project/arrange' },
])

// 导航栏
const opacity = ref(0)
const navHeight = computed(() =>uni.getStorageSync('navHeight') ? uni.getStorageSync('navHeight') + 42 :60)
const computedStyle = computed(() => {
	return {
		'height': navHeight.value + 'px',
		'background-color': `rgba(0, 26, 50, ${opacity.value})`,
		'backdrop-filter': `blur(${opacity.value * 20}px) `,
		'-webkit-backdrop-filter': `blur(${opacity.value * 20}px) `
	}
})


// 标签样式
const statuscy = (type) => {
    const styles = {
        1: { background: "#E3F5FF", color: "#25B2FD", borderColor: "#BBDBEC" },
        2: { background: "#EEF1F8", color: "#B2B7C3", borderColor: "#DFDFDF" },
        3: { background: "#FFF1F1", color: "#F92525", borderColor: "#FFD4D4" },
        4: { background: "#FFF1F1", color: "#F92525", borderColor: "#FFD4D4" },
        5: { background: "#ECFFF9", color: "#15D394", borderColor: "#AFE6D4" },
        6: { background: "#ECFFF9", color: "#15D394", borderColor: "#AFE6D4" },
        7: { background: "#ECFFF9", color: "#15D394", borderColor: "#AFE6D4" },
        8: { background: "#FFF9EF", color: "#F59B03", borderColor: "#F0E5D1" },
        default: { background: "#EEF1F8", color: "#B2B7C3", borderColor: "#DFDFDF" }
    };

    return styles[type] || styles.default;
};


/**
 * 跳转中冶赛迪页面
 * @param {number} type - 页面类型：1-考勤打卡，2-花名册，4-考勤统计，7-区域配置，8-人员考勤记录
 */
function handleCheck(type) {
    // 处理认证码逻辑
    const authCode = uni.getStorageSync('authCode') || '';
    const cisdiAuthCode = uni.getStorageSync('cisdiAuthCode');
    
    // 如果认证码发生变化，清除相关token
    if (cisdiAuthCode !== authCode) {
        uni.removeStorageSync('cisdiAccessToken');
        uni.removeStorageSync('cisdiRefreshToken');
    }
    
    // 更新存储的认证码
    uni.setStorageSync('cisdiAuthCode', authCode);
    
    // 根据类型跳转对应页面
    const pageMap = {
        1: '/pagesA/pages/attendance/check/position',
        2: '/pagesA/pages/roster/roster',
        4: '/pagesA/pages/attendanceFlow/attendanceFlow',
        7: '/pagesA/pages/attendance/areaList/editAreaConfig/editAreaConfig',
        8: '/pagesA/pages/personnelAttendanceRecord/personnelAttendanceRecord'
    };
    
    const targetUrl = pageMap[type];
    if (targetUrl) {
        uni.navigateTo({ url: targetUrl });
    } else {
        console.warn(`未知的页面类型: ${type}`);
    }
}


// /* 下拉刷新 */
onPullDownRefresh(() => {
	console.log('下拉刷新')
	uni.showLoading({
		title: '加载中',
		mask: true
	})
	getUserInfo().then(res=>{
		if(res.code == 200 && res.data){
			init()
			getGuideList()
		}
	}).finally(()=>{
		uni.hideLoading()
		uni.stopPullDownRefresh()
	})
})


onLoad((option)=>{
	
})

onShow(()=>{
	if(uni.getStorageSync('token') && uni.getStorageSync('userInfo')){
		init()
		getGuideList()
		uni.removeStorageSync('certificationInfo') //清除实名认证信息
	}else{
		uni.removeStorageSync('token')
		uni.removeStorageSync('userInfo')
		uni.removeStorageSync('certificationInfo')
		uni.navigateTo({
			url: '/pages/login/index'
		})
	}
})

// 监听页面滚动
onPageScroll((e) => {
	let scrollTop = e.scrollTop
	opacity.value = scrollTop / 800
	if(opacity.value > 0.6){
		opacity.value = 0.6
	}else if(opacity.value < 0){
		opacity.value = 0
	}
})
</script>

<style lang="scss" scoped>
.container {
	width: 100vw;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #F5F5F5;
	.bg_img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		z-index: 1;
	}
	/* navbar */
	.nav_bar{
      position: fixed;
      top: 0;
      z-index: 99;
      width: 100%;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      padding-bottom: 10rpx;
      box-sizing: border-box;
      .icon-box{
        height: 100%;
        width: 80rpx;
        display: flex;
        align-items: flex-end;
        padding-left: 28rpx;
      }
      .name{
        flex: 1;
        color: #101010;
        font-size: 34rpx;
        text-align: center;
        font-weight: 600;
      }
    }
	/* 项目&人员信息 */
	.content{
		width: 100%;
		padding: 0 40rpx;
		box-sizing: border-box;
		margin-top:420rpx;
		z-index: 2;
		.swiper{
			width: 100%;
			height:480rpx;
			background-color: rgb(255, 255, 255, .6);
			border-radius: 20rpx;
			.projectInfo{
				width: 100%;
				height:480rpx;
				&_head{
					width: 100%;
					height: 80rpx;
					padding: 10rpx 40rpx 0 40rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					box-sizing: border-box;
					&_left{
						font-size: 36rpx;
						font-weight: 600;
					}
					&_right{
						display: flex;
						align-items: center;
						image{
							width: 40rpx;
							height: 40rpx;
						}
						text{
							font-size: 30rpx;
							color: #1684FC;
							margin-left: 10rpx;
						}
					}
				}
				&_content{
					width: 100%;
					height: 80rpx;
					padding: 0 40rpx;
					box-sizing: border-box;
					&_item{
						width: 100%;
						height: 64rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						&_left{
							width: 150rpx;
							font-size: 28rpx;
							color: #999;
						}
						&_right{
							flex: 1;
							font-size: 28rpx;
							color: #101010;
							font-weight: 600;
							text-align: right;
							//溢出隐藏
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
					.btn{
						width: 100%;
						height: 80rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 20rpx;
						::v-deep .u-button{
							width: 45%;
						}
					}
				}
			}
			.userInfo{
				width: 100%;
				height: 100%;
				&_head{
					width: 100%;
					height: 200rpx;
					padding: 0 40rpx;
					display: flex;
					align-items: center;
					box-sizing: border-box;
					border-bottom: 1rpx solid #ccc;
					&_left{
						width: 150rpx;
					}
					&_right{
						flex: 1;
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						padding: 16rpx 0;
						box-sizing: border-box;
						&_name{
							display: flex;
							align-items: center;
							font-size: 36rpx;
							font-weight: 600;
							text{
								margin-right: 10rpx;
							}
						}
						&_role{
							//里面的u-tag宽度由内容撑开
							::v-deep .u-tag{
								width: max-content;
								&_text{
									margin: 0;
								}
							}
						}
						&_phone{
							font-size: 28rpx;
							color: #101010;
						}
					}
				}
				&_content{
					width: 100%;
					height: 80rpx;
					padding: 0 40rpx;
					box-sizing: border-box;
					&_item{
						width: 100%;
						height: 80rpx;
						display: flex;
						align-items: center;
						&_left{
							width:80rpx;
							display: flex;
							align-items: center;
							image{
								width: 48rpx;
								height: 48rpx;
							}
						}
						&_right{
							flex: 1;
							font-size: 28rpx;
							color: #343434;
							font-weight: 600;
							//溢出隐藏
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}
			}
		}
		/* 办事指南 */
		.guide{
			width: 100%;
			padding: 0 40rpx;
			border-radius: 16rpx;
			margin: 40rpx 0;
			background-color: #fff;
			box-sizing: border-box;
			&_head{
				width: 100%;
				height: 80rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				&_left{
					font-size: 36rpx;
					font-weight: 600;
				}
				&_right{
					flex: 1;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					font-size: 28rpx;
					color: #1684FC;
				}
			}
			&_content{
				width: 100%;
				box-sizing: border-box;
				&_item{
					width: 100%;
					height: 200rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-top: 2rpx solid #eaeaea;

					&_left{
						flex: 1;
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						padding: 16rpx 0;
						box-sizing: border-box;
						&_title{
							font-size: 30rpx;
							font-weight: 600;
							color: #101010;
							//超出2行溢出隐藏
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
						}
						&_time{
							font-size: 28rpx;
							color: #999;
						}
					}
					&_right{
						margin-left: 20rpx;
						width: 200rpx;
					}
					&:first-child {
						border-top:unset;
					}
				}
		
			}
		
		}
		/* 项目管理 */
		.manage{
			width: 100%;
			padding: 0 40rpx;
			border-radius: 16rpx;
			margin: 40rpx 0;
			background-color: #fff;
			box-sizing: border-box;
			&_head{
				width: 100%;
				height: 80rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 36rpx;
				font-weight: 600;
			}
			&_content{
				width: 100%;
				box-sizing: border-box;
				//8个图标入口每4个一行分2行
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				grid-template-rows: repeat(2, 1fr);
				grid-gap: 20rpx;
				padding-bottom: 20rpx;
				&_item{
					width: 100%;
					height: 160rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					border-radius: 16rpx;
					&_icon{
						width: 96rpx;
						height: 96rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 16rpx;
						image{
							width: 90rpx;
							height: 90rpx;
						}
					}
					text{
						font-size: 28rpx;
						font-weight: 600;
						margin-top: 16rpx;
					}
				}
			}
		}
	}
}
</style>